<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
             :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="药品名称" prop="drug">
            <!--            <el-input v-model="form.drug" placeholder="请输入药品名称"/>-->

            <el-select
                v-model="form.drug"
                filterable
                default-first-option
                placeholder="选择药品名称"
                :reserve-keyword="false"
                allow-create
                clearable
            >
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.drugName"
                  :value="item.drugName"
              />
            </el-select>

          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="药物用法" prop="frequency">
            <el-input v-model="form.frequency" placeholder="请输入药物用法"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="用药方式" prop="idea">
            <!--            <el-input v-model="form.idea" placeholder="请输入用药方式"/>-->
            <el-select
                v-model="form.idea"
                filterable
                default-first-option
                placeholder="选择用药方式"
                :reserve-keyword="false"
                allow-create
                clearable
            >
              <el-option
                  v-for="item in drug_idea"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--        <el-col :span="12" class="mb20">-->
        <!--          <el-form-item label="用药频率" prop="frequency">-->
        <!--            &lt;!&ndash;            <el-input v-model="form.frequency" placeholder="请输入用药频率"/>&ndash;&gt;-->
        <!--            <el-select-->
        <!--                v-model="form.frequency"-->
        <!--                filterable-->
        <!--                default-first-option-->
        <!--                placeholder="选择用药频率"-->
        <!--                :reserve-keyword="false"-->
        <!--                allow-create-->
        <!--                clearable-->
        <!--            >-->
        <!--              <el-option-->
        <!--                  v-for="item in drug_frequency"-->
        <!--                  :key="item.id"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.label"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->

        <el-col :span="12" class="mb20">
          <el-form-item label="计量单位" prop="unit">
            <!--            <el-input v-model="form.unit" placeholder="请输入计量单位"/>-->
            <el-select
                v-model="form.unit"
                filterable
                default-first-option
                placeholder="选择计量单位"
                :reserve-keyword="false"
                allow-create
                clearable
            >
              <el-option
                  v-for="item in drug_unit"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--        <el-col :span="12" class="mb20">-->
        <!--          <el-form-item label="服药计量" prop="unitMedicine">-->
        <!--            &lt;!&ndash;            <el-input v-model="form.unitMedicine" placeholder="请输入服药计量"/>&ndash;&gt;-->
        <!--            <el-select-->
        <!--                v-model="form.unitMedicine"-->
        <!--                filterable-->
        <!--                default-first-option-->
        <!--                placeholder="选择服药计量"-->
        <!--                :reserve-keyword="false"-->
        <!--                allow-create-->
        <!--                clearable-->
        <!--            >-->
        <!--              <el-option-->
        <!--                  v-for="item in drug_unitMedicine"-->
        <!--                  :key="item.id"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.label"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->

        <el-col :span="12" class="mb20">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker type="date"
                            placeholder="请选择开始时间"
                            v-model="form.startTime"
                            format="YYYY-MM-DD"
                            date-format="YYYY/MM/DD"
                            :value-format="dateTimeStr"></el-date-picker>
          </el-form-item>
        </el-col>


        <el-col :span="12" class="mb20">
          <el-form-item label="停药时间" prop="endTime">
            <el-date-picker type="date" placeholder="请选择停药时间" v-model="form.endTime"
                            format="YYYY-MM-DD"
                            date-format="YYYY/MM/DD"
                            :value-format="dateTimeStr"></el-date-picker>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="BloodxCustomerDrugDialog">
// import {useDict} from '/@/hooks/dict';
import {useMessage} from "/@/hooks/message";
import {getObj, addObj, putObj, getDrugList} from '/@/api/blood/bloodxCustomerDrug'
import {useDict} from "/@/hooks/dict";
// import {rule} from '/@/utils/validate';
const emit = defineEmits(['refresh']);

const {
  drug_idea,
  drug_unit,
} = useDict('drug_idea', 'drug_unit')

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
  customerId: '',
  id: '',
  drug: '',
  idea: '',
  frequency: '',
  unit: '',
  unitMedicine: '',
  startTime: '',
  endTime: '',
  status: 0,
});

const options = ref([])

// 定义校验规则
const dataRules = ref({
  drug: [{required: true, message: '请输入药品名称', trigger: 'blur'}]
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  form.customerId = '';
  form.id = '';
  form.drug = '';
  form.idea = '';
  form.frequency = '';
  form.unit = '';
  form.unitMedicine = '';
  form.startTime = '';
  form.endTime = '';
  form.status = 0;

  // 获取bloodxCustomerDrug信息
  if (id) {
    form.id = id
    getbloodxCustomerDrugData(id)
  }
};

const openDialogAdd = (customerId: string) => {
  visible.value = true
  form.customerId = '';
  form.id = '';
  form.drug = '';
  form.idea = '';
  form.frequency = '';
  form.unit = '';
  form.unitMedicine = '';
  form.startTime = '';
  form.endTime = '';
  form.status = 0;
  form.customerId = customerId
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    // await feedBack();
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// const feedBack = async () => {
//   try {
//     await drugFeedback(Object.assign({
//       id: form.customerId,
//       drugStatus: 0
//     }));
//   } catch (err: any) {
//     useMessage().error(err.msg);
//   }
// };


// 初始化表单数据
const getbloodxCustomerDrugData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

const getDrugListData = () => {
  getDrugList().then((res: any) => {
    options.value = res.data
  })
}

onMounted(() => {
  getDrugListData()
})

// 暴露变量
defineExpose({
  openDialog,
  openDialogAdd
});
</script>
